使用 Fireworks

创建和使用丰富的图形元件

丰富元件是一种图形元件类型,可以使用 JavaScript (JSF) 文件对其进行智能缩放并为其提供特定的属性。然后可以使用“元件属性”面板(“窗口”>“元件属性”)来控制这些属性。

只需将元件拖到文档上并从“元件属性”面板编辑与这些元件关联的参数,即可使用丰富元件快速创建用户界面或网站设计。

若要查看或使用丰富元件:

1. 从“窗口”菜单中选择“公用库”以打开“公用库”面板。

2. 若要使用某个元件,请将该元件从“公用库”面板拖放到 Fireworks 画布。

Fireworks CS3 中已包括了预设计的丰富元件库。可以轻松自定义这些元件以适应特定网站或用户界面的外观要求。

与所有元件一样,可以使用“属性”检查器对丰富元件类型的实例进行编辑,而不会对元件的其它实例造成影响。也可以使用“元件属性”面板来更改元件属性。

若要编辑元件本身,可以双击元件实例,然后在元件编辑器中编辑该元件。所进行的编辑会影响当前元件及该元件的所有其它实例。

注:对大多数类型的编辑而言,修改实例会影响该元件和所有其它实例。但也有一些例外。有关详细信息,请参阅编辑实例

若要创建丰富图形元件:

1. 创建一个其属性可能需要自定义的对象。

此元件可以将项目符号颜色和项目符号编号作为可自定义选项。


2. 创建对象时,可在“层”面板中键入名称,以自定义要使其成为可编辑的功能的名称。例如,可以将可编辑的文本字段命名为“label”。此名称将在 JavaScript 文件中使用。

注:在命名功能时,不要在名称中包含任何空格。这会导致 JavaScript 错误。因此,例如,不能将“number label”用作名称,而可以使用“number_label”作为名称。

3. 选择对象,然后选择“修改”>“元件”>“转换为元件”。

4. 在“转换为元件”对话框的“名称”文本框中,为该元件键入一个名称。

5. 选择“图形”作为元件类型,然后选择“保存到公用库”。然后单击“确定”。

软件将提示您选择保存新元件的位置。默认情况下,软件会创建一个“自定义元件”文件夹。可以将新元件保存到该文件夹,也可以在与“自定义元件”文件夹相同的级别创建其它文件夹。

注: 丰富元件必须保存在“公用库”内的文件夹中。

保存后,元件将从画布删除,并显示在“公用库”中。

6. 通过从“命令”菜单中选择“创建元件脚本”打开“创建元件脚本”面板。

7. 单击该面板右上角的浏览按钮并浏览到元件 PNG 文件。默认情况下,该文件保存在 <user settings>\Application Data\ Adobe\Fireworks 9\Common Library\Custom Symbols (Windows) 或 <user name>/Application Support/Adobe/ Fireworks9/Common Library/Custom Symbols (Macintosh) 目录中。

8. 单击加号按钮添加元素名称。

9. 添加您要自定义的元素的名称。例如,如果您要自定义名称为“label”的文本字段,请在“元素名称”字段中键入“label”。

10. 在“属性”字段中,选择您要自定义的属性的名称。例如,若要自定义标签中的文本,请选择 textChars 属性;若要自定义对象的填充颜色,请选择 fillColor 属性。

注:有关这些属性选项的更多信息,请参阅《Extending Fireworks》(英文)。

11. 在“属性名称”字段中,键入可自定义属性的名称,例如“Label”或“Number”。这是出现在“元件属性”面板中的属性名称。

12. 在“值”字段中,键入属性的默认值。首次将元件的实例放在文档中时,这将是默认值。

13. 根据需要添加其它元素。

14. 单击“保存”保存所选的选项并创建 JavaScript 文件。

15. 从“公用库”面板的“选项”菜单中选择“重新加载”以重新加载新元件。

创建 JavaScript 文件后,可以通过将该元件拖至画布来创建该元件的新实例,然后通过在“元件属性”面板中更改其属性来更新属性。

使用“元件属性”面板编辑元件属性


注:创建了 JavaScript 文件后,如果删除或重命名由该脚本引用的元件中的对象,则“元件属性”面板将生成错误。

若要将现有元件另存为丰富元件:

1. 在“库”面板中选择一个元件。

2. 从“库”面板的“选项”菜单中选择“保存到公用库”。

3. 创建 JavaScript 文件以控制元件属性。